<template>
  <div id="goods-component">
    <div
      class="goods-item"
      v-for="(item, index) in goods"
      :key="index"
      @click="send_detail(item.iid)"
    >
      <!-- <img :src="ispath ? item.image : item.show.img" alt="" @load="images" /> -->
      <img v-lazy="ispath ? item.image : item.show.img" alt="" @load="images" />
      <div class="text">
        <!-- <p>{{ item.props[0] }}</p> -->
        <p>{{ ispath ? item.title : item.props[0] }}</p>
        <span class="price">{{ ispath ? item.price : item.orgPrice }}</span>
        <span class="star"><van-icon name="star-o" /> {{ item.cfav }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Goods",
  props: {
    goods: {
      type: Array,
      default: [],
    },
  },
  methods: {
    //发送详情页的http
    send_detail(iid) {
      //手动发送http
      this.$router.push("/detail/" + iid)
    },

    images() {
      this.$emit("images")
    },
  },
  computed: {
    //判断路径
    ispath() {
      return this.$route.path.indexOf("/detail") != -1
    },
  },
}
</script>

<style lang="less" scoped>
#goods-component {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: #fff;
  .goods-item {
    flex-basis: 45%;
    margin-top: 15px;
    img {
      width: 100%;
      height: 225px;
    }
    .text {
      width: 100%;
      text-align: center;
      p {
        width: 144px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
      }
      span {
        font-size: 12px;
      }
      .price {
        color: #ff5777;
        margin-right: 10px;
      }
    }
  }
}
</style>
